<template>
	<div class="mainDiv">
			<div class="rowHead">
                <el-select v-model="filter.brandid" @change="selbrand" placeholder="请选择品牌">
                    <el-option label="请选择品牌" value="0">
                    </el-option>
                    <el-option v-for="item in brandlist" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="filter.keywords" placeholder="请输入关键字" class="searchArea" @keyup.enter.native="getmsg">
                    <el-button slot="append" icon="search" type="primary" @click="getmsg"></el-button>
                </el-input>
            </div>
            <el-table :data="goodslist" height="100%" @row-click="selectRow" :row-class-name="tableRowClassName">
                <el-table-column prop="selected" label="选择" width="100">
                    <template scope="scope">
                        <el-switch v-model="scope.row.selected"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="number" label="编号"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="nums" label="库存"></el-table-column>
                <el-table-column prop="remarks" label="描述" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
            <div class="rowHead">
                <el-col :span="12">
                	<el-pagination @current-change="changecurrent" :current-page="filter.currentpage" layout="total, prev, pager, next" :total="total" :page-size="filter.pagesize">
                	</el-pagination>
                </el-col>
                <el-col :span="12">
                	<el-button style="float: right;margin-right:10px;" size="mini" type="success" icon="check" @click="goback">确定选择</el-button>
                	<el-button style="float: right;margin-right:10px;" size="mini" type="danger" icon="close" @click="closeWindow">取消关闭</el-button>
                </el-col>
                
            </div>
            <div class="block right mt">
                
            </div>


	</div>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'selectGoods',
    data() {
        return {
            goodslist: [],
            brandlist: [],
            selectlist: [],
            total: 0,
            filter: {
                pagesize: 30,
                isdisabled: 0,
                currentpage: 1,
                brandid: '',
                keywords: ''
            }
        }
    },
    methods: {
        changecurrent: function(val) {
            this.filter.currentpage = val
            this.getmsg()
        },
        getmsg: async function() {
            let data = await C.ajax('/shop/popup/getgoodslist', { filter: JSON.stringify(this.filter) }, 'post')
            if (data) {
                this.total = data.count
                this.checkselect(data.data)
            }
        },
        selbrand: function() {
            this.getmsg()
        },
        selectRow: function(row, event, column) {
            event.preventDefault()
            let key = this.inselectlist(row.id)
            if (key > -1) {
                this.selectlist.splice(key, 1)
                row.selected = false
            } else {
                this.selectlist.push(row)
                row.selected = true
            }
        },
        tableRowClassName: function(row, index) {
            if (row.selected) return 'info-row'
        },
        // 计算是否选择
        checkselect: function(data) {
            data.forEach((row, index) => {
                data[index].selected = this.inselectlist(row.id) > -1 ? true : false
            })
            this.goodslist = data
        },
        inselectlist: function(id) {
            let selectIndexKey = -1
            this.selectlist.forEach((row, index) => {
                if (row.id == id) {
                    selectIndexKey = index
                    return
                }
            })
            return selectIndexKey
        },
        goback: function() {
            C.closeBrowserWindow(this.selectlist)
        },
        closeWindow: function() {
            C.closewin()
        }
    },
    mounted: async function() {
        // 获取品牌列表
        let data = await C.ajax('/shop/popup/getbrandlist', {}, 'post')
        if (data) {
            this.brandlist = data
        }
        this.getmsg()
    }
}
</script>